<!--
 * @Author: YuA
 * @Date: 2021-07-31 20:36:34
 * @LastEditTime: 2021-08-17 23:40:03
 * @FilePath: \index\src\components\content\MainTabBar\MainTabBar.vue
-->
<template>
  <div>
    <tabbar class="tabbar">
      <tab-bar-item path="/home">
        <span class="item-icon" slot="item-icon">&#xe799;</span>
        <div class="item-text" slot="item-text">发现</div>
      </tab-bar-item>
      <tab-bar-item path="/podcast">
        <span class="item-icon icon2" slot="item-icon">&#xe607;</span>
        <div class="item-text" slot="item-text">播客</div>
      </tab-bar-item>
      <tab-bar-item path="/my">
        <span class="item-icon" slot="item-icon">&#xe630;</span>
        <div class="item-text" slot="item-text">我的</div>
      </tab-bar-item>
      <tab-bar-item path="/song">
        <span class="item-icon" slot="item-icon">&#xe613;</span>
        <div class="item-text" slot="item-text">歌房</div>
      </tab-bar-item>
      <tab-bar-item path="/spruce">
        <span class="item-icon" slot="item-icon">&#xe606;</span>
        <div class="item-text" slot="item-text">云村</div>
      </tab-bar-item>
    </tabbar>
  </div>
</template>

<script>
import Tabbar from "components/common/Tabbar/Tabbar.vue";
import TabBarItem from "components/common/Tabbar/TabBarItem.vue";
export default {
  name: "MainTabBar",
  components: {
    Tabbar,
    TabBarItem
  }
};
</script>

<style scoped>
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}

.item-icon {
  width: 33px;
  height: 33px;
  margin-top: 3px;
  border-radius: 50%;
  color: #d8bfbf;

  line-height: 30px;
}

.item-text {
  color: #d8bfbf;
  font-size: 12px;
}

.icon2 {
  font-size: 19px;
}
</style>
